
	<!DOCTYPE html>
	<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>hello_react</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支撑react操作DOM-->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用于将jsx转为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>

	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>
		<div id="demo"></div>

		<script type="text/babel">/* 此处必须写成babel */
			//1.创建一个虚拟DOM
			let VDOM = <h1>Hello,React</h1> //此处一定不要加引号，因为不是字符串，是虚拟DOM
			const VDOM2 = (
				<h1>
					<span>hello_react222</span>
				</h1>
			)
			//2.让React将虚拟DOM——VDOM转为真实DOM，渲染到页面
			ReactDOM.render(VDOM, document.getElementById('test')) //这行代码，不是追加的动作，而是替换的动作
			
			console.log('虚拟', VDOM);
			console.log('真实', document.getElementById("demo"));
			// debugger
		</script>
	</body>

	</html>
